<template>
  <div class="app">
    <router-view />
    <!-- 底部标签栏 -->
    <van-tabbar v-model="active" :route="true" v-if="flag">
      <van-tabbar-item to="/" class="iconfont icon-home">首页</van-tabbar-item>
      <van-tabbar-item to="/class" class="iconfont icon-leimupinleifenleileibie2">分类</van-tabbar-item>
      <van-tabbar-item to="/cart" class="iconfont icon-tianchongxing-">购物车</van-tabbar-item>
      <van-tabbar-item to="/me" class="iconfont icon-geren2">我的卷皮</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      flag:true
    };
  },
  watch: {
    '$route':function(val){
      // console.log(val);
      if(val.path !== '/' && val.path !== '/class' && val.path !== '/cart' && val.path !== '/me') {
        this.flag = false;
      } else {
        this.flag = true;
      }
    }
  },
};
</script>
<style lang="less">
.app {
  .van-tabbar-item {
    font-size: 25px;;
  }
  .van-tabbar-item .van-tabbar-item__text{
    font-size: 0.4266666666666667rem;
  }
  // 选中的样式
  .van-tabbar-item--active {
    color: #ff464e;
  }
}
</style>